<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box" style="font-size: 20px;width: 200px;"></div>
		<script type="text/javascript">
			var oBox = document.getElementById("box")
//			alert(oBox.id)
//			oBox.style.width = "200px";
//			写到style标签中的样式，无法获取宽度
//			alert(oBox.style.width)
			//通过对象.style.属性的这种方式，只能获取行内样式
//			alert(oBox.style.fontSize)
			//getComputedStyle： 获取计算后的样式
//			alert(getComputedStyle(oBox).width)
			alert(getStyle(oBox, "height"))
			//注意：兼容性问题，在标准浏览器下 用getComputedStyle
			//                在ie低版本下（6、7、8）currentStyle
			function getStyle(obj,attr){
//				if(window.getComputedStyle){
//					//注意：如果属性名是一个变量，需要把 . 换成 []
//					return window.getComputedStyle(obj)[attr]
//				}else{
//					return obj.currentStyle[attr]
//				}
				return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr]
			}
		</script>
	</body>
</html>
